<template>
  <router-view v-slot="{ Component }">
    <keep-alive excludeKey="[]">
      <component
        :is="Component"
        :key="$route.name"
        v-if="$route.meta.keepAlive"
        @GoldCoinRecharge="GoldCoinRechargeAction"
      />
    </keep-alive>
    <component
      :is="Component"
      :key="$route.name"
      v-if="!$route.meta.keepAlive"
      @GoldCoinRecharge="GoldCoinRechargeAction"
    />
  </router-view>
  <div class="footer-box" v-if="barShow">
    <van-tabbar v-model="active" @change="barChange">
      <van-tabbar-item v-for="item in barList" :key="item.id"
        ><span :class="active == item.id ? 'inactive' : 'active'">{{
          item.name
        }}</span
        ><template #icon="props">
          <img
            :src="active == item.id ? item.inactive : item.active"
          /> </template
      ></van-tabbar-item>
    </van-tabbar>
  </div>
  <GoldCoinRecharge v-if="isHide" :isHide="isHide" @update:UpdateIsHide="ev => isHide = ev"/>
</template>
<script setup>
import { reactive, toRefs, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
let router = useRouter();
let route = useRoute();

import bar1 from "@/assets/image/bar1.png";
import bar2 from "@/assets/image/bar2.png";
import bar3 from "@/assets/image/bar3.png";
import bar4 from "@/assets/image/bar4.png";
import bar1checked from "@/assets/image/bar1-checked.png";
import bar2checked from "@/assets/image/bar2-checked.png";
import bar3checked from "@/assets/image/bar3-checked.png";
import bar4checked from "@/assets/image/bar4-checked.png";
import GoldCoinRecharge from "@/components/goldCoinRecharge/index.vue";

const state = reactive({
  barList: [
    {
      id: "index",
      name: "首页",
      active: bar1,
      inactive: bar1checked,
      url: "/index",
    },
    {
      id: "activity",
      name: "活动",
      active: bar2,
      inactive: bar2checked,
      url: "/activity",
    },
    {
      id: "inform",
      name: "通知",
      active: bar3,
      inactive: bar3checked,
      url: "/inform",
    },
    {
      id: "personage",
      name: "我的",
      active: bar4,
      inactive: bar4checked,
      url: "/personage",
    },
  ],
  active: "index",
});

const { barList, active } = toRefs(state);

let { name } = route;
state.active = name;
const barChange = (ev) => {
  let item = state.barList[ev];
  state.active = item.id;
  localStorage.setItem("homeItem", 1);
  localStorage.setItem("activity", 0);
  if (name != item.id) {
    router.push({
      path: item.url,
    });
  }
};

let barShow = ref(false);
barShow.value = route.meta.barShow;

let isHide = ref(false);

// 充值金币
const GoldCoinRechargeAction = () => {
  isHide.value = true;
};
</script>

<style scoped>
.read-the-docs {
  color: #888;
}

.inactive {
  color: #ee66ff;
}

.active {
  color: #999;
}
</style>
